<template>
  <div class="outbody">
    <header id="header">
      <h3 class="header-title">哈尔滨流域水环境分析系统</h3>
    </header>
    <div id="container">
      <div id="flexCon">
        <div class="flex-row">
          <div class="flex-cell flex-cell-l">
            <div class="chart-wrapper">
              <h3 class="chart-title">排污量分析</h3>
              <div class="chart-div" id="rankChart">
                <div class="chart-loader"><div class="loader"></div></div>
              </div>
            </div>
          </div>
          <div class="flex-cell flex-cell-c" style="padding-right:0;">
            <div class="chart-wrapper">
              <h3 class="chart-title">水流量分析</h3>
              <h3 style="float: right; position: relative; right: 32px; top: -24px;" class="chart-title">污染物扩散监测</h3>
              <div class="chart-div chart-done">
                <table class="data-t">
                  <tr>
                    <th><img src="./img/icon-06.png" /></th>
                    <td>
                      <p><span id="listedCompany">0</span></p>
                      <p>松花江</p>
                    </td>
                    <th><img src="./img/icon-05.png" /></th>
                    <td>
                      <p><span id="listedSecurity">0</span></p>
                      <p>总氮</p>
                    </td>
                  </tr>
                  <tr>
                    <th><img src="./img/icon-06.png" /></th>
                    <td>
                      <p><span id="totalMarket">0</span></p>
                      <p>马家沟</p>
                    </td>
                    <th><img src="./img/icon-05.png" /></th>
                    <td>
                      <p><span id="circulationMarket">0</span></p>
                      <p>总氨</p>
                    </td>
                  </tr>
                  <tr>
                    <th><img src="./img/icon-06.png" /></th>
                    <td>
                      <p><span id="shRatio">0</span></p>
                      <p>呼兰河</p>
                    </td>
                    <th><img src="./img/icon-05.png" /></th>
                    <td>
                      <p><span id="szRatio">0</span></p>
                      <p>总磷</p>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
          <div class="flex-cell flex-cell-r" style="padding-left:0;">
            <div class="chart-wrapper">
              <h3 class="chart-title">地域分布</h3>
              <div class="chart-div" id="mapChart">
                <div class="chart-loader"><div class="loader"></div></div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-row">
          <div class="flex-cell flex-cell-lc" style="padding-bottom:0;">
            <div class="chart-wrapper">
              <h3 class="chart-title">周围人口数量</h3>
              <div class="chart-div" id="trendChart">
                <div class="chart-loader"><div class="loader"></div></div>
              </div>
            </div>
          </div>
          <div class="flex-cell flex-cell-r" style="padding-bottom:0;">
            <div class="chart-wrapper">
              <h3 class="chart-title">河段氨氮模拟</h3>
              <div class="chart-div" id="csrcChart">
                <div class="chart-loader"><div class="loader"></div></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer id="footer"></footer>
  </div>
</template>

<script>
  import  countdata from './data/count-data'
  import  csrcdata from './data/csrc-industry'
  import  monthcountdata from './data/month-count'
  import  rankingdata from './data/ranking-list'
  import  regiondata from './data/region-count'
  import  heb_full from './data/230100_full.json'
  export default {
      name: "bigindex",
       methods:{
          init(){
            $(function() {
              //获取当天日期
              (function() {
                const now = new Date();
                const year = now.getFullYear();
                const month = now.getMonth()+1;
                const day = now.getDate();
                $("#nowDate").html(year+"年"+month+"月"+day+"日");
              })();

              //获取统计数据
                rollNum("listedCompany", 0, countdata.listed_companies_total);
                rollNum("listedSecurity", 0, countdata.listed_securities_total);
                rollNum("totalMarket", 0, countdata.total_market_value, 2);
                rollNum("circulationMarket", 0, countdata.circulation_market_value, 2);
                rollNum("shRatio", 0, countdata.sh_pe_ratio, 2);
                rollNum("szRatio", 0, countdata.sz_pe_ratio, 2);

              //获取排行数据
              const rankChart = echarts.init(document.getElementById("rankChart"), "shine");
              const rankChartOpt = {
                tooltip: {
                  trigger: "axis",
                  axisPointer: {
                    type: "shadow"
                  },
                  formatter: function(params) {
                    const param = params[0];
                    const marker = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#e6b600;"></span>';
                    const suffix = '<span style="margin-left:5px;font-size:12px;">吨</span>';
                    return param.name + "<br />" +
                      marker + "排名：" + (param.dataIndex+1) + "<br />" +
                      marker + "总值：" + param.value + suffix;
                  }
                },
                grid: {
                  top: 10,
                  bottom: 10,
                  left: 60
                },
                xAxis: {
                  show: false,
                  type: "value"
                },
                yAxis: {
                  type: "category",
                  inverse: true,
                  axisLine: {show: false},
                  axisTick: {show: false},
                  axisLabel: {
                    fontSize: 12,
                    color: "#b0c2f9"
                  }
                },
                series: [{
                  name: "总排行",
                  type: "bar",
                  barCategoryGap: "60%",
                  label: {
                    show: true,
                    position: "right",
                    fontSize: 12,
                    color: "#188df0",
                    emphasis: {
                      color: "#e6b600"
                    }
                  },
                  itemStyle: {
                    normal: {
                      color: new echarts.graphic.LinearGradient(
                        0, 1, 1, 1,
                        [
                          {offset: 0, color: '#b0c2f9'},
                          {offset: 0.5, color: '#188df0'},
                          {offset: 1, color: '#185bff'}
                        ]
                      )
                    },
                    emphasis: {
                      color: new echarts.graphic.LinearGradient(
                        0, 1, 1, 1,
                        [
                          {offset: 0, color: '#b0c2f9'},
                          {offset: 0.7, color: '#e6b600'},
                          {offset: 1, color: '#ceac09'}
                        ]
                      )
                    }
                  }
                }]
              };
              rankChart.setOption(rankChartOpt);
              $("#rankChart").addClass("chart-done");
                var xData = [];
                const yData = [];
                for(let i in rankingdata) {
                  xData.push(rankingdata[i].market_capitalization);
                  yData.push(rankingdata[i].stock_name);
                }
                rankChart.setOption({
                  yAxis: {
                    data: yData
                  },
                  series: [{
                    name: "总排行",
                    data: xData
                  }]
                });
              echarts.registerMap("heb", heb_full);//注册地图
              //获取地域分布数据
              const mapChart = echarts.init(document.getElementById("mapChart"), "shine");
              const mapChartOpt = {
                tooltip: {
                  formatter: function(params) {
                    const data = params.data;
                    return data.name + "<br />数量：" + data.value;
                  }
                },
                visualMap: {
                  type: "piecewise",
                  splitNumber: 6,
                  itemWidth: 10,
                  itemHeight: 10,
                  itemGap: 5,
                  textGap: 5,
                  textStyle: {
                    fontSize: 10,
                    color: "#b0c2f9"
                  },
                  min: 0,
                  max: 600,
                  calculable: true,
                  seriesIndex: [0]
                },
                geo: {
                  map: "heb",
                  roam: true, //开启鼠标缩放和漫游
                  zoom: 1, //地图缩放级别
                  selectedMode: "single",
                  top: 10,
                  bottom: 10,
                  layoutCenter: ["50%", "50%"],
                  //layoutSize: "100%", //保持地图宽高比
                  label: {
                    show: true,
                    fontSize: 10,
                    color: "#ceac09"
                  }
                },
                series: [{
                  name: "地域分布",
                  type: "map",
                  geoIndex: 0
                }]
              };
              mapChart.setOption(mapChartOpt);
                $("#mapChart").addClass("chart-done");
                var chartData = [];
                for(let i in regiondata) {
                  chartData.push({
                    name: regiondata[i].region,
                    value: regiondata[i].count
                  });
                }
                mapChart.setOption({
                  series: [{
                    name: "地域分布",
                    data: chartData
                  }]
                });

              //获取月度股票情况数据
              const trendChart = echarts.init(document.getElementById("trendChart"), "shine");
              const trendChartOpt = {
                tooltip: {
                  trigger: "axis",
                  axisPointer: {
                    type: "none"
                  }
                },
                legend: {
                  left: "center",
                  bottom: 3,
                  itemWidth: 15,
                  itemHeight: 10,
                  textStyle: {
                    fontSize: 12,
                    color: "#b0c2f9"
                  },
                  data: ["2020", "2019", "2018"]
                },
                grid: {
                  top: 40,
                  bottom: 50,
                  left: 60,
                  right: 60
                },
                xAxis: {
                  type: "category",
                  axisLine: {
                    lineStyle: {color: "#b0c2f9"}
                  },
                  axisTick: {show: false},
                  axisLabel: {
                    fontSize: 12,
                    color: "#b0c2f9"
                  }
                },
                yAxis: [{
                  name: "数量",
                  type: "value",
                  splitNumber: 5,
                  axisLine: {
                    lineStyle: {color: "#b0c2f9"}
                  },
                  splitLine: {show: false},
                  axisTick: {color: "#b0c2f9"},
                  axisLabel: {
                    fontSize: 12,
                    color: "#b0c2f9",
                    formatter: (value, index) => {
                      return parseInt(value / 10000) + "万";
                    }
                  }
                }, {
                  name: "占比",
                  type: "value",
                  splitNumber: 5,
                  maxInterval: 5,
                  minInterval: 5,
                  interval: 5,
                  axisLine: {
                    lineStyle: {color: "#b0c2f9"}
                  },
                  splitLine: {show: false},
                  axisTick: {color: "#b0c2f9"},
                  axisLabel: {
                    fontSize: 12,
                    color: "#b0c2f9"
                  }
                }],
                visualMap: {
                  show: false,
                  seriesIndex: 2,
                  dimension: 0,
                  pieces: [{
                    lte: 9,
                    color: "rgba(176, 58, 91, 1)"
                  }, {
                    gt: 9,
                    lte: 11,
                    color: "rgba(176, 58, 91, 0.5)"
                  }]
                },
                series: [
                  {
                  name: "2020",
                  type: "pictorialBar",
                  symbol: 'path://d="M150 50 L130 130 L170 130  Z"',
                  barCategoryGap: "40%",
                  itemStyle: {
                    color: function(params) {
                      if(params.dataIndex >= 10) {
                        return "rgba(119, 96, 246, 0.5)";
                      }
                      return "rgba(119, 96, 246, 1)";
                    }
                  },
                  markPoint: {
                    itemStyle: {
                      color: "rgba(119, 96, 246, 1)"
                    },
                    data: [{
                      name: "最大值",
                      type: "max"
                    }]
                  },
                  markLine: {
                    lineStyle: {
                      color: "rgba(119, 96, 246, 1)"
                    },
                    label: {
                      position: "middle",
                      formatter: "月度平均值：{c}万"
                    },
                    data: [{
                      name: "平均值",
                      type: "average"
                    }]
                  }
                },
                  {
                  name: "2019",
                  type: "pictorialBar",
                  symbol: 'path://d="M150 50 L130 130 L170 130  Z"',
                  barCategoryGap: "40%",
                  itemStyle: {
                    color: function(params) {
                      if(params.dataIndex >= 10) {
                        return "rgba(230, 182, 0, 0.5)";
                      }
                      return "rgba(230, 182, 0, 1)";
                    }
                  },
                  markPoint: {
                    itemStyle: {
                      color: "rgba(230, 182, 0, 1)"
                    },
                    data: [{
                      name: "最大值",
                      type: "max"
                    }]
                  },
                  markLine: {
                    lineStyle: {
                      color: "rgba(230, 182, 0, 1)"
                    },
                    label: {
                      position: "middle",
                      formatter: "月平均总值：{c}万"
                    },
                    data: [{
                      name: "平均值",
                      type: "average"
                    }]
                  }
                },
                  {
                  name: "2018",
                  type: "line",
                  yAxisIndex: 1
                }]
              };
              trendChart.setOption(trendChartOpt);
                $("#trendChart").addClass("chart-done");
                var xData = [];
                const yData1 = [];
                const yData2 = [];
                const yData3 = [];
                for(let i in monthcountdata) {
                  xData.push(monthcountdata[i].month);
                  yData1.push(monthcountdata[i].sh_market_capitalization);
                  yData2.push(monthcountdata[i].sh_transaction_amount);
                  yData3.push(monthcountdata[i].sh_pe_ratio);
                }
                trendChart.setOption({
                  xAxis: {
                    data: xData,
                  },
                  series: [{
                    name: "2020",
                    data: yData1
                  }, {
                    name: "2019",
                    data: yData2
                  }, {
                    name: "2018",
                    data: yData3
                  }]
                });


              //获取CSRC行业分类数据
              const csrcChart = echarts.init(document.getElementById("csrcChart"), "shine");
              const csrcChartOpt = {
                tooltip: {
                  trigger: "item",
                  formatter: "{b0}<br />排放量：{c0}<br />占比：{d0}%"
                },
                legend: {
                  type: "scroll",
                  orient: "vertical",
                  padding: 0,
                  top: 15,
                  right: 0,
                  itemGap: 5,
                  itemWidth: 10,
                  itemHeight: 10,
                  textStyle: {
                    fontSize: 10,
                    color: "#b0c2f9"
                  }
                },
                series: [{
                  name: "CSRC行业分类",
                  type: "pie",
                  center: ["47%", "55%"],
                  radius: ["30%", "85%"]
                }]
              };
              csrcChart.setOption(csrcChartOpt);
                $("#csrcChart").addClass("chart-done");
                var chartData = [];
                for(let i in csrcdata) {
                  chartData.push({
                    name: csrcdata[i].alias,
                    value: csrcdata[i].stock
                  });
                }
                csrcChart.setOption({
                  series: [{
                    name: "CSRC行业分类",
                    data: chartData
                  }]
                });

              //浏览器窗口大小变化时，重置报表大小
              $(window).resize(function() {
                rankChart.resize();
                mapChart.resize();
                trendChart.resize();
                csrcChart.resize();
              });
            });
            //数字变化特效
            function rollNum(elId, startVal, endVal, decimalNum) {
              let n = decimalNum || 0;
              let countUp = new CountUp(elId, startVal, endVal, n, 2.5, {
                useEasing: true,
                useGrouping: true,
                separator: ',',
                decimal: '.'
              });
              if(!countUp.error) {
                countUp.start();
              }else {
                console.error(countUp.error);
              }
            }
          }
       },
      mounted() {
        this.init();
      }
    }
</script>

<style scoped>

  /* global */
  * {margin:0;padding:0;box-sizing:border-box;}
  .outbody {
    width:100%;
    height:100%;
    min-width:1200px;
    min-height:600px;
    overflow:hidden;
  }
  .outbody {
    position:relative;
    font-family:"Microsoft Yahei", Arial, sans-serif;
    background:rgb(40, 30, 47) url("./img/bg.png") 0 0 / 100% 100% no-repeat;
  }

  /* layout */
  #header {
    position:relative;
    height:72px;
    background:url("./img/header.png") 0 0 / 100% 100% no-repeat;
    overflow:hidden;
  }
  .header-title {line-height:64px;text-align:center;font-size:34px;font-weight:400;color:#fff;}
  .header-info {position:absolute;top:32px;font-size:18px;color:#73aae5;}
  .header-info-l {left:20px;}
  .header-info-r {right:20px;}
  #footer {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:28px;
    background:url("./img/footer.png") 0 0 / 100% 100% no-repeat;
  }
  #container {position:absolute;top:72px;bottom:22px;left:0;right:0;}

  #flexCon {
    height:100%;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
  }
  .flex-row {
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
  }
  .flex-cell {-webkit-flex:1;-ms-flex:1;flex:1;padding:15px;}
  .flex-cell-l,
  .flex-cell-r {-webkit-flex:2;-ms-flex:2;flex:2;}
  .flex-cell-c {-webkit-flex:3;-ms-flex:3;flex:3;}
  .flex-cell-lc {-webkit-flex:5;-ms-flex:5;flex:5;}

  .chart-wrapper {position:relative;height:100%;}
  .chart-title {height:32px;font-size:22px;font-weight:normal;color:#9aa8d4;}
  .chart-div {position:absolute;top:32px;bottom:0;left:0;right:0;}

  .data-t {table-layout:fixed;width:100%;height:100%;border-collapse:collapse;}
  .data-t th,
  .data-t td {min-height:48px;}
  .data-t th {width:60px;text-align:center;background:url("./img/icon-bg.png") center / 100% no-repeat;}
  .data-t th img {width:30px;height:30px;}
  .data-t td {padding-left:15px;}
  .data-t p {margin:5px 0;line-height:1;font-size:14px;color:#b0c2f9;}
  .data-t p span {font-size:32px;font-weight:bold;color:#fff;}

  /* media query */
  @media (max-width:1900px) {
    #header {height:48px;}
    .header-title {line-height:42px;font-size:24px;}
    .header-info {top:17px;font-size:14px;}
    .header-info-l {left:15px;}
    .header-info-r {right:15px;}
    .flex-cell {padding:10px;}
    .chart-title {height:24px;font-size:18px;}
    .chart-div {top:24px;}
    .data-t p span {font-size:24px;}
    #footer {height:16px;}
    #container {top:48px;bottom:12px;}
  }

  /* chart-loader */
  .chart-loader {
    position:absolute;
    top:0;
    left:0;
    z-index:99;
    width:100%;
    height:100%;
    background:rgba(255, 255, 255, 0);
    transition:all .8s;
  }
  .chart-loader .loader {
    position:absolute;
    left:50%;
    top:50%;
    width:60px;
    height:60px;
    margin:-30px 0 0 -30px;
    border:3px solid transparent;
    border-top-color:#3498db;
    border-radius:50% !important;
    -webkit-animation:spin 2s linear infinite;
    animation:spin 2s linear infinite;
  }
  .chart-loader .loader:before {
    content:"";
    position:absolute;
    top:3px;
    left:5px;
    right:5px;
    bottom:5px;
    border:3px solid transparent;
    border-top-color:#e74c3c;
    border-radius:50% !important;
    -webkit-animation:spin 3s linear infinite;
    animation:spin 3s linear infinite;
  }
  .chart-loader .loader:after {
    content:"";
    position:absolute;
    top:9px;
    left:10px;
    right:10px;
    bottom:10px;
    border:3px solid transparent;
    border-top-color:#f9c922;
    border-radius:50% !important;
    -webkit-animation:spin 1.5s linear infinite;
    animation:spin 1.5s linear infinite;
  }
  .chart-done .chart-loader {display:none;}
  @-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg)
    }
    100% {
      -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg)
    }
  }
  @keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg)
    }
    100% {
      -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg)
    }
  }
</style>
